

//加载Overlay
function InitPieOverlay() {

    var points;//展示点位
    $.ajax({
        type: "get",
        url: "http://172.19.18.223:5555/rdbmsserver?table=qy",
        success: function (msg) {
            points = $.parseJSON(msg).features;


            for (var i = 0; i < points.length; i++) {

                //alert(points[i].properties.NAME);


                var divchart = document.createElement('div');
                divchart.style = " height: 60px;width: 60px;";
                var pt = ol.proj.transform([points[i].geometry.coordinates[0], points[i].geometry.coordinates[1]], 'EPSG:4326', 'EPSG:3857');
                var pie = new ol.Overlay({
                    position: pt,
                    positioning: 'center-center',
                    element: divchart
                });
                map.addOverlay(pie);

                var chart = echarts.init(divchart);

                var data = [{name: '第一类', value: 20}, {name: '第二类', value: 23}, {name: '第三类', value: 45}, {
                    name: '第四类',
                    value: 34
                }, {name: '第五类', value: 14}];

                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                        }
                    },
                    calculable: true,
                    series: [{
                        type: 'pie',
                        radius: '60%',
                        startAngle: '45',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#000000',
                                    fontWeight: 'bold',
                                    fontSize: 16
                                }
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data: data
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                chart.setOption(option);

            }

        },
        error: function () {

        }
    });


}



$(function () {

    InitPieOverlay();

    var element = document.createElement('div');
    element.setAttribute("id", "divOverlay");

    var btnOverlay = document.createElement("BUTTON");
    btnOverlay.textContent = "显示Overlay";
    btnOverlay.setAttribute("id", "btnOverlay");

    element.appendChild(btnOverlay);
    element.className = 'ol-unselectable ol-control';
    document.body.appendChild(element); //将代码生成的要素添加到map div里面


    $("#btnOverlay").click(function () {
        if ($("#btnOverlay").text().trim() == "显示Overlay") {
            $("#btnOverlay").text("隐藏Overlay");

            var overlayers = map.getOverlays();
            overlayers.clear();
            InitPieOverlay();


            //刷新地图，否则overlay图层会有偏移
            setTimeout(function () {
                var ptcenter = map.getView().getCenter();
                map.getView().setCenter([ptcenter[0], ptcenter[1] + 0.01]);
            }, 100);


        } else {
            $("#btnOverlay").text("显示Overlay");

            var overlayers = map.getOverlays();
            overlayers.clear();

        }
    });

})


